<template>
<!-- 侧边栏菜单 导航 。 -->
	<view class="flex flex-row">
		<tm-sheet :color="props.menuBarBgColor" :height="_height " :width="_sliderMenuWidth" :unit="props.unit" :margin="[0,0]" :padding="[0,0]" >
			<scroll-view :show-scrollbar="false" scroll-y :style="{ height: _height+'rpx',width:_sliderMenuWidth+'rpx' }">
				<tm-sheet v-for="(item,index) in _list" :key="index" :margin="[0,0]" :padding="[0,0]"
				:color="props.menuActiveBgColor"
				:transprent="_active-1!==index&&_active+1!==index"
				no-level
				>
					<tm-sheet
					no-level
						@click="menuClick(item,index)" 
						:color="_active===index?props.menuActiveBgColor:props.menuBarBgColor" 
						:isDisabledRoundAndriod="true"
						_class="flex flex-row flex-row-center-center relative" 
						:margin="[0,0]" :height="_sliderMenuItemHeight" 
						:padding="[0,0]" :width="_sliderMenuWidth" 
						:class='(_active-1===index?"round-br-3":"")+" " + (_active+1===index?"round-tr-3":"")'
						borderDirection="bottom"
						>
							<view :userInteractionEnabled="false" class="absolute l-6" :style="{top:(_sliderMenuItemHeight-30)/2+'rpx'}">
								<tm-sheet  :round="2" v-if="_active==index" :height="30"  :margin="[0,0]" :padding="[0,0]" :color="props.menuActiveFontColor" :width="6"></tm-sheet>
							</view>
							<tm-badge v-if="!item.icon" :userInteractionEnabled="false" color="red" :count="item.dotCount" >
								<view class="flex flex-colflex-col-center-center  py-10" :style="{width:`${_sliderMenuWidth-28}rpx`}">
									<tm-text :_class="'text-align-center '+ (_active==index?'text-weight-b':'')" :color="_active==index?props.menuActiveFontColor:props.menuFontColor" :font-size="props.fontSize" :label="item.text"></tm-text>
								</view>
							</tm-badge>
							<tm-badge v-if="item.icon" :userInteractionEnabled="false" color="red" :count="item.dotCount" >
								<view class="flex flex-row flex-row-center-center py-10" :style="{width:`${_sliderMenuWidth-28}rpx`}">
									<tm-icon v-if="item.icon" :color="_active==index?props.menuActiveFontColor:props.menuFontColor" :font-size="props.fontSize" :name="item.icon"></tm-icon>
									<view :userInteractionEnabled="false" class="px-10 " >
										<tm-text :_class="'text-align-center '+ (_active==index?'text-weight-b':'')" :color="_active==index?props.menuActiveFontColor:props.menuFontColor" :font-size="props.fontSize" :label="item.text"></tm-text>
									</view>
								</view>
							</tm-badge>
						</tm-sheet>
				</tm-sheet>
			</scroll-view>
		</tm-sheet>
		<tm-sheet no-level class='flex-1' parenClass="flex-1"  :show-scrollbar="false" :margin="[0,0]" :padding="[0,0]" :color="props.bodyBgColor">
			<scroll-view :refresher-triggered="_refresh"
			@scrolltolower="onBottom" 
			@refresherrefresh="onRefresh" 
			@refresherrestore="onRestore" 
			@refresherabort="onAbort" 
			refresher-enabled 
			scroll-y
			class="flex-1"
			:style="{ height: _height+'rpx',}"
			v-if="!props.isScroll"
			>
				<slot name="default"></slot>
				<view v-if="_pullStauts=='bottom'&&_isLoadding" class="my-40 flex flex-row flex-row-center-center">
					<tm-icon spin name="tmicon-shuaxin" :font-size="22" color="primary"></tm-icon>
					<tm-text :font-size="22" color="grey" _class="pl-20" label="加载中..."></tm-text>
				</view>
			</scroll-view>
			<view v-if="props.isScroll"> 
				<slot name="default"></slot>
			</view>
		</tm-sheet>
	</view>
</template>

<script lang="ts" setup>
	import tmText from  "@/tmui/components/tm-text/tm-text.vue"
	import tmIcon from  "@/tmui/components/tm-icon/tm-icon.vue"
	import tmSheet from  "@/tmui/components/tm-sheet/tm-sheet.vue"
	import tmBadge from  "@/tmui/components/tm-badge/tm-badge.vue"
import { ref, getCurrentInstance, nextTick, Ref, computed, PropType, watch } from "vue"
import {propsCustom} from "./props"
interface listItem {
	text:string,
	dotCount?:number|string
	[prop:string]:any
}
/**事件 */
const emits = defineEmits<{
	/** 点击菜单时触发，返回索引和项目数据 */
  (e: 'click', item:listItem,index:number): void
  /** 索引切换时触发 */
  (e: 'change', index:number): void
  /** 索引切换时触发 */
  (e: 'update:active', index:number): void
  /** 数据加载时触发 type:'pull'|'bottom'|'menu',item:listItem|null=null,index:number=NaN */
  (e: 'load', type:'loading'|'success'|'pull'|'bottom'|'menu',index:number): void
  /** 重置下拉时触发 */
  (e: 'restore'): void
}>()

const props = defineProps({...propsCustom})
const slidWidthPx = uni.upx2px(props.sliderWidth)
const _list = computed(()=>{
	return props.list.map(el=>{
		return {...el,text:el?.text??(el[props.rangKey]??''),dotCount:el?.dotCount??0,icon:el?.icon??''}
	})
})
/**设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发 */
const _refresh:Ref<boolean|string> = ref(true);
const _isLoadding = ref(false);//是否刷新中.
const _pullStauts:Ref<'pull'|'bottom'|'menu'|''> = ref('')
const _active = ref(props.active);
const _width = ref(props.unit=='px'?uni.$tm.u.torpx(props.width):props.width)
const _sliderMenuWidth = ref(props.unit=='px'?uni.$tm.u.torpx(props.sliderWidth):props.sliderWidth)
const _sliderMenuItemHeight = ref(props.unit=='px'?uni.$tm.u.torpx(props.itemHeight):props.itemHeight)
const _height= ref(props.unit=='px'?uni.$tm.u.torpx(props.height):props.height)


watch(()=>props.active,()=>{
	if(props.active==_active.value) return;
	_active.value = props.active;
})
watch(_active,()=>{
	emits("update:active",_active.value)
	emits("change",_active.value)
})
const menuClick = async (item:listItem,index:number)=>{
	_active.value = index;
	nextTick(async ()=>{
		emits("click",item,index)
		emits("load",'loading')
		_isLoadding.value = true;
		_pullStauts.value = 'menu'
		await actionLoad('menu',item,index)
		_isLoadding.value = false;
		emits("load",'success')
	})
}
async function onRefresh(){
	if(_isLoadding.value){
		_refresh.value = false;
		return;
	}
	emits('restore')
	emits("load",'loading')
	_isLoadding.value = true;
	_pullStauts.value = 'pull'
	await actionLoad('pull')
	// _refresh.value = false;
	_refresh.value = true;
	/** 我解释下下面为什么要如此操作：原因是在微信小程序端，部分小米手机会出现无限下拉的情况，我初步判断是手机性能不行，导致原生的下拉复位还没反应过来，接着又执行了其它函数。 */
	setTimeout(function(){
		_isLoadding.value = false;
		_refresh.value = false;
	},300)
}
async function onBottom() {
	
	if(_isLoadding.value||props.disabledBottom) return;
	emits("load",'loading')
	_isLoadding.value = true;
	_pullStauts.value = 'bottom'
	await actionLoad('bottom')
	emits("load",'success')
	_isLoadding.value = false;
	
}

async function actionLoad(type:'pull'|'bottom'|'menu',item:listItem|null=null,index:number=NaN){
	let fun = props.load;
	let p:any = true;
	// uni.showLoading({title:'...',mask:true})
	if(typeof fun === 'function'){
		p = await fun(type,item,index)
		if(typeof p === 'function'){
			await p(type,item,index)
		}
	}

	// uni.hideLoading()
}

function onAbort(){
	_refresh.value = false;
}
function onRestore(){
	_refresh.value = false;
	// console.error('restore')
}
</script>

<style>
</style>
